<?
    include './linkSQL.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <style>
        /* #table tr td {
            width: 115px;
            text-align: center;
        }
        #table tr:nth-of-type(even){
            background-color: rgb(214, 151, 34) !important ;
        } */
    </style>
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" value="张三123" /></p>
            <p>性别
                <select name="gender" id="gender">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </p>
            <p>年龄<input id="age" type="text" value="21" /></p>
            <p>分数<input id="score" type="text" value="60"></p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="排序" id="sortBtn" />
            </p>
        </div>
        <table id="table" style="height:50px;">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>分数</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
               <?
                foreach($Data as $key=>$value){
                    // echo $value['stuName'];
                    ?>
                    <tr>
                        <td><?echo $value['stuName']?></td>
                        <td><?echo $value['gender']?></td>
                        <td><?echo $value['age']?></td>
                        <td><?echo $value['score']?></td>
                        <td><a href="./operate.php?op=del&id=<?echo$value['id']?>">删除</a></td>
                    </tr>
                    <?
                }
               ?>
            </tbody>
        </table>
    </div>
    <script>
        let username = document.querySelector("#username");
        let gender = document.querySelector("#gender");
        let age = document.querySelector("#age");
        let score = document.querySelector("#score");
        let addBtnEle = document.querySelector("#addBtn");
        let sortBtnEle = document.querySelector("#sortBtn");
        addBtnEle.onclick = function (){
            window.location.href = `./operate.php?op=add&username=${username.value}&gender=${gender.value}&age=${age.value}&score=${score.value}`;  
        }
        sortBtnEle.onclick = function (){
            window.location.href = `./stu.php?op=sort`;
        }
    </script>
</body>

</html>